<template>
	<view class="cate">
		<my-search @click="toSearch" bgc = "#c00000" :radius="50"></my-search>
		<!-- 内容区域 -->
		<view class="main">
			<!-- 左侧内容区域 -->
			<view class="left">
				<scroll-view scroll-y="true" :style="{ height: `${wh}px` }" >
					<view @click="changeActive(index)" class="leftitem" v-for="(item,index) in cateList" :class="{ active: active === index}" :key="index"> {{ item.cat_name }} </view>
				</scroll-view>
				
			</view>
			<!-- 右侧内容区域 -->
			<view class="right">
				<scroll-view scroll-y="true" :scroll-top="scrollTop" :style="{ height: `${wh}px`}">
					<view v-for="(item , index) in secondCateList"  >
						<!-- 二级分类名 -->
						<view class="title">
							/{{item.cat_name}}/
						</view>
						<!-- 二级分类内容 -->
						<view class="itembox">
							<view @click="toList(seconditem.cat_name)" class="brand" v-for="(seconditem , secondindex) in item.children" :key="secondindex">
								<!-- 三级分类 -->
								<image :src="seconditem.cat_icon" mode="widthFix"></image>
								<text>{{seconditem.cat_name}}</text>
							</view>
							
						</view>
						
					</view>
				</scroll-view>
				
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import mymixins from '../../mixin/index.js'
	export default {
		mixins: [mymixins],
		data() {
			return {
				// 分类列表高度
				wh:0,
				// 选中效果的下标值
				active:0,
				// 一级分类列表数据源
				cateList:[],
				// 二级分类列表
				secondCateList:[],
				// 设置页面的滚动距离
				scrollTop: 0
			};
		},
		onLoad(){
			uni.getSystemInfo({
				success: res => {
					this.wh = res.windowHeight - 55
				}
			})
			this.getCateList()
		},
		methods:{
			// 跳转到详情页面
			toList(name) {
			  uni.navigateTo({
			    url: `/pages/list/list?key=${name}`
			  })
			},
			// 切换选中状态
			changeActive(index){
				this.active = index
				this.secondCateList = this.cateList[this.active].children
				// 重置滚动条的位置
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
				
			},
			async getCateList(){
				let {data:res} = await	uni.$http.get('/api/public/v1/categories')			
				if(res.meta.status !== 200) return uni.$showMsg()
				
				this.cateList = res.message
				this.secondCateList = this.cateList[this.active].children
			},
			// 搜索跳转点击事件
			toSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.cate{
		.main{
			display: flex;
			.left{
				width: 200rpx;
				.leftitem{
					height: 100rpx;
					font-size: 14px;
					text-align: center;
					line-height: 100rpx;
					background-color: #f7f7f7;
					&.active{
						background-color: #fff;
						position: relative;
						&::before{
							content: '';
							height: 60rpx;
							width: 4rpx;
							background-color: #c00000;
							position: absolute;
							top: 50%;
							left: 0%;
							transform: translateY(-50%);
						}
						
					}
				}
			}
			.right {
				flex: 1;
			      .title {
			        font-weight: 700;
			        text-align: center;
			        line-height: 100rpx;
			      }
			      .itembox {
			        display: flex;
			        flex-wrap: wrap;
			        .brand {
			          display: flex;
			          flex-direction: column;
			          align-items: center;
			          width: 33.33%;
			          image {
			            width: 60%;
			          }
			        }
			      }
			    }
			
		}
		
	}
	

</style>
